<template>
  <div class="page-home" v-if="loaded" :style="scale">
    <div class="home">
      <div class="home__header "><span class="home__header__title">消防报警实时监控统计（深圳）</span>
          <div class="date"><i class="date__icon"></i><span class="date__txt">{{time}}</span></div>
      </div>
      <div class="main">
        <div class="hd">
          <div class="card">
            <div class="title">
              <span>今日报警情况</span>
            </div>
            <div class="chart">
              <ve-histogram height="100%" :grid="grid" :data="chartData[0]" :yAxis="yAxis" :legend-visible="false" :settings="settings" :extend="extend"></ve-histogram>
            </div>
          </div>
          <div class="card">
            <div class="title">
              <span>报警类型占比</span>
            </div>
            <div class="chart">
              <ve-ring height="100%" :legend-visible="false" :data="chartData[1]" :settings="settings_2" :extend="extend_2"></ve-ring>
            </div>
          </div>
        </div>
        <div class="map" id="map">
          <ve-heatmap height="100%" :data="chartData[8]" :settings="settings_9"></ve-heatmap>
        </div>
        <div class="fd">
          <div class="card">
            <div class="title">
              <span>今日处置警情</span>
            </div>
            <div class="chart">
              <ve-histogram height="100%" :grid="grid" :data="chartData[2]" :yAxis="yAxis" :legend-visible="false" :extend="extend"></ve-histogram>
            </div>
          </div>
          <div class="card">
            <div class="title">
              <span>区县接入排行</span>
            </div>
            <div class="chart">
              <ve-pie height="100%" :data="chartData[3]" :settings="settings_3" :legend-visible="false" :extend="extend_3"></ve-pie>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="card full">
            <div class="title">
              <span>在线直播</span>
            </div>
            <div class="player">
              <video :src="video[0]" class="video" controls></video>
            </div>
          </div>
          <div class="card">
            <div class="title">
              <span>{{alarmTitle[alarm]}}报警原因统计</span>
            </div>
            <div class="chart">
              <!--
              <ve-gauge :data="chartData[5]" :settings="settings_5"></ve-gauge>
              <ve-pie height="100%" :data="chartData[5]" :settings="settings_3" :legend-visible="false" :extend="extend_3"></ve-pie>
              -->
              <ve-pie height="100%" :data="causeOfAlarm" :settings="settings_3" :legend-visible="false" :extend="extend_3"></ve-pie>
            </div>
          </div>
          <div class="card">
            <div class="title">
              <span>{{alarmTitle[alarm]}}在线率</span>
            </div>
            <div class="chart">
              <ve-gauge :data="onLineRate" :settings="settings_5"></ve-gauge>
            </div>
          </div>
          <div class="card full">
            <div class="title">
              <span>在线直播</span>
            </div>
            <!--
            <div class="chart">
              <ve-gauge :data="chartData[7]" :settings="settings_5"></ve-gauge>
            </div>
            -->
            <div class="player">
              <video :src="video[0]" class="video" controls></video>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  //import echarts from 'echarts'//此处引入echarts
  //import chinaMap from 'echarts/map/js/china.js'

  import home from "../../api/home"
  export default {
    data () {
      const self = this
      // 柱体
      this.grid = {
        show: true,
        top: 30,
        left: 0,
        bottom: 10,
        borderWidth: 0,
        color: '#fff'
      }
      this.yAxis = {
        show: false,
        width: 10
      }
      
      this.extend = {
        series: {
          barWidth: 15,
          label: { 
            show: true, 
            position: "top",
          },
          emphasis: {
            barGap: '-100%',
          }
        },
        'xAxis.0.axisLabel.color': '#fff'
      }

      this.settings = {
        label: { 
          show: true, 
          color: '#fff'
        }
      }
      // 环形
      this.settings_2 = {
        offsetY: 120,
        radius: [40, 80],
        label: {
          show: true,
          position: 'center',
          formatter: '{b} {d}',
        }
        
      }

      this.extend_2 = {
        series: {
          barWidth: 15,
          label: { 
            show: true, 
            position: "top",
            formatter: '{b} {d}%',
          }
        }
      }
      // 饼图
      this.settings_3 = {
        limitShowNum: 5,
        offsetY: 120,
        radius: 80,
        label: {
          show: true,
          position: 'center',
          formatter: '{b} {d}',
        }
      }

      this.extend_3 = {
        series: {
          barWidth: 15,
          label: { 
            show: true, 
            position: "top",
            formatter: '{b} {d}%',
          }
        }
      }

      this.settings_4 = {
        limitShowNum: 5,
        offsetY: 120,
        radius: [10, 80],
        label: {
          show: true,
          position: 'center',
          formatter: '{b} {d}',
        }
      }

      this.extend_4 = {
        series: {
          barWidth: 15,
          label: { 
            show: true, 
            position: "top",
            formatter: '{b} {d}%',
          }
        }
      }
      // 仪表盘
      this.settings_5 = {
        dataType: {
          '在线率': 'percent'
        },
        seriesMap: {
          '在线率': {
            center: ['50%', '30%'],
            min:0,
            max:1,
            splitNumber:5,
            radius: 100,
            startAngle:160,
            endAngle:20,
            axisLine: {
              lineStyle: {
                color: [[0.2, '#ff4500'],[0.82, '#1e90ff'],[1, 'lime']],
                width: 2,
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: 'lighter',
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            splitLine: {
              length:15,
              lineStyle: {
                width:3,
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 5
              }
            },
            pointer: {
              width:2,
              shadowColor: '#fff',
              shadowBlur: 5
            },
          }
        }
      }
      // 地图
      this.settings_9 = {
        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
        bmap: {
          center: [114.069777,22.550618],
          roam: true,
          mapStyle: {
            style: 'dark'
          }
        },
        type: 'bmap'
      }
      this.tooltip_9 = { 
        show: true
      }

      return {
        loaded: false,
        width: 100,
        Height: 0,
        scale: ``,
        time: ``,
        video: [],
        alarm: 0,
        chart: 0,
        alarmTitle: ['可燃气体探测器', '烟雾探测器', '温度探测器'],
        chartData: [],
        onLineRate: [], // 在线率 chartData[7,8,9]
        causeOfAlarm: [] // 报警原因  chartData[4,5,6]
      }
    },
    async beforeMount(){
      const self = this
      this.load()
      setInterval(this.updateTime, 1000)
      
      setInterval(this.load, 5000)
    },
    components: {
    },
    computed: {
      
    },
    mounted () {
      this.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      this.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.scale = `transform: scale(${this.width / 1920}, ${this.height / 1080})`
    },
    methods: {
      updateTime() {
        let date = new Date()
        this.time = date.toLocaleString()
      },

      windowResize () {
        let Width = `${document.documentElement.clientWidth}`
        let Height = `${document.documentElement.clientHeight}`
        this.scale = `transform: scale(${Width / 1920}, ${Height / 1080})`
      },
      
      async load () {
        try {
          const {data} = await home.get()
          this.video = data.video
          this.chartData = data.echart
          if (this.alarm < this.alarmTitle.length - 1) {
            this.alarm++
          } else {
            this.alarm = 0
          }
          this.causeOfAlarm = this.chartData[this.alarm + 3]
          this.onLineRate = this.chartData[this.alarm + 7]
          console.log(this.onLineRate)
          this.loaded = true
        } catch (e) {
          console.log(`网络异常`)
        }
      },
      
    },
    created () {
      this.windowResize()      
    },
    mounted () {
      const self = this
      window.onresize = function () {self.windowResize()}
    }
    
  }
  
</script>
<style lang='less'>
  @import "../../static/css/main";
</style>